import Vue from 'vue'// 引入Vue

import 'normalize.css/normalize.css' // 重置样式 它让不同的浏览器在渲染网页元素的时候形式更统一

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' // 全局

// import locale from 'element-ui/lib/locale/lang/en' // element 语言包

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
import '@/permission' // permission control

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
// if (process.env.NODE_ENV === 'production') {
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

// set ElementUI lang to EN
// locale 英语
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI)

Vue.config.productionTip = false

// Vue.directive('自定义名称', {})
// Vue.directive('imageError', {
//   // inserted 这个钩子是dom元素插入的时候触发的
//   inserted(dom, bindings, vNode) { // 插入dom元素的时候生效
//     // dom.style.color = bindings.value
//     // 图片加载不出来的时候 img error 事件
//     dom.onerror = function() {
//       // 换一张正常的图片的地址
//       dom.src = bindings.value
//     }
//   }
//   // 更新的时候触发
//   // update(dom, bindings) {
//   //   dom.style.color = bindings.value
//   // }
// })

// 写main.js 合适吗？？
// 抽取 自定义指令  src/directives/index.js 目录下
import * as directives from '@/directives/index.js'
// console.log(directives)
Object.keys(directives).forEach(key => {
  // key 自定义名称
  // directives[key] 自定义对象
  Vue.directive(key, directives[key])
})

// Vue.use({
//   install: function(Vue) {
//     console.log(Vue)
//   }
// })

// 组件全局注册
// Vue.component('组件名称'， 组件对象)
// import PageTools from '@/components/PageTools'
// Vue.component('PageTools', PageTools)
import Plugin from '@/components'
Vue.use(Plugin)

// Vue.use( plugin，参数2，参数3，..... )
// 插件 plugin 插件
// 第一个参数 对象或者是函数
// 对象，必须提供 install 方法
// 函数，它会被作为 install 方法
// Vue.use() 这个方法 执行的时候 其实就是 执行install 这个方法，并且 会把Vue 作为第一个参数传递进去。
// 场景：
// 不会重复注册插件

// 这个 插件的全局组册时 Vue.use去做的吗？？？
// Vue.use本质是无法注册全局组件或者给Vue原型添加方法,但是我们在使用路由或者vuex或者element ui,实际还是在install函数内部通过Vue.component注册了全局组件或者给Vue.prototype手动添加方法

// 在我们人资项目里 有全局注册的组件  有用全局组册的过滤器 有全局的自定义指令 等等 完成可以仿造 element-ui的方式来处理 课后有时间可以试一下
// Vue.use((Vue) => {
//   console.log(Vue)
//   Vue.component('PageTools', PageTools)
// })

import * as filters from '@/filters'
// Vue.filter('过滤器名称'， 过滤器) // 过滤器本质就是一个函数 返回一个值
// console.log(Object.keys(filters))
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})
